<template>
    <div class="breadCrumb">
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.name">{{item.meta.name + separator}}</router-link>
    </div>
</template>


<script setup>
// vue3.2以后，defineEmits defineProps不需要在引入了，已经全局了

import { watchEffect,toRefs } from 'vue';

    // 声明props
    let props = defineProps({
        data:{
            type:Array,
            default(){
                return []
            }
        },
        separator:{
            type:String,
            default(){
                return "/"
            }

        }
    })

    watchEffect(()=>{
        // console.log(props.data)
    })

    // console.log(props)
    // 结构props
    let {data,separator} = toRefs(props)

  


</script>





<style scoped>
.breadCrumb{
    /* border: 1px solid; */
    margin: 10px 0;
}

.breadCrumb a{
    font-size: 16px;;
    font-weight: 900;
    color:black;
    margin:5px
}
</style>